<template>
    <div>
        <div>
            <p>用户：<input type="text" v-model="username"></p>
            <p>密码：<input type="password" v-model="password"></p>
            <p>手机：<input type="text" v-model="phone"></p>
            <p>邮箱：<input type="text" v-model="email"></p>
            <p><input type="button" value="注册" @click="tj()"></p>
        </div>
        <div>
        <div>
            <!-- <p v-if="i%1==0" :style="{'background':'red'}">用户：{{i.name}}--密码：{{i.password}}--手机：{{i.phone}}--邮箱：{{i.email}}</p>
            <p v-if="i%2==0" :style="{'background':'yellow'}">用户：{{i.name}}--密码：{{i.password}}--手机：{{i.phone}}--邮箱：{{i.email}}</p>
            <p v-if="i%3==0" :style="{'background':'red'}">用户：{{i.name}}--密码：{{i.password}}--手机：{{i.phone}}--邮箱：{{i.email}}</p> -->

            <table>
                <tr>
                    <td>ID</td>
                    <td>用户</td>
                    <td>密码</td>
                    <td>手机</td>
                    <td>邮箱</td>
                </tr>
                <tr :style="{'backaround':'red'}" v-for="(i,j) in uselist" :key="j">
                    <td>{{i.id}}</td>
                    <td>{{i.username}}</td>
                    <td>{{i.password}}</td>
                    <td>{{i.phone}}</td>
                    <td>{{i.email}}</td>
                </tr>
            </table>
        </div>
        </div>
    </div>
</template>

<script>
import { ZC_user_reg } from '../axios_send/api.js'
import { ZC_user_show } from '../axios_send/api.js'
export default {
    name:"user",
    data(){
        return{
            username:"",
            password:"",
            phone:"",
            email:"",
            uselist:"",
        }
    },
    created(){
        this.show()
    },
    methods:{
        tj(){
            var data={
                "username":this.username,
                "password":this.password,
                "phone":this.phone,
                "email":this.email
            }
            ZC_user_reg(data)
            .then(res=>{
                console.log(res)
                if(res.code==200){
                }
            })
        },
        show(){
            ZC_user_show().then(res=>{
                console.log(res)
                this.uselist=res
            })
        }
    }
}
</script>

<style>

</style>
